<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="订单详情" />

        <view
            class="wrap paddingBottom"
            :style="{ '--navigation-height': navigationHeight + 'px' }"
            v-if="dataInfo"
        >
            <image
                class="wrap-bg"
                :src="getImageURL('navigationBar/top_bg.png')"
                mode="widthFix"
            />

            <view class="order-status f-32 flex column just-center">
                <view class="status f-32">
                    {{ dataInfo.status_text2 }}
                </view>

                <view class="down-time f-24" v-if="dataInfo.status === '1'">
                    请在{{ minute }}分{{
                        second
                    }}秒内完成支付，逾期订单将自动取消
                </view>
            </view>

            <view class="order-process white-bg flex align-center mtp">
                <block v-for="(item, index) in addprocess_list" :key="index">
                    <view
                        class="process-item"
                        v-if="dataInfo.is_add || dataInfo.is_upgrade"
                    >
                        <view class="flex column align-center just-center">
                            <view
                                class="process-icon flex align-center just-center"
                                :class="{
                                    'process-icon-active':
                                        item.status <= dataInfo.status,
                                }"
                            >
                                <image
                                    mode="heightFix"
                                    :src="
                                        getImageURL(
                                            `technician/order/${item.icon}_${
                                                item.status <= dataInfo.status
                                                    ? 'active'
                                                    : 'normal'
                                            }.png`
                                        )
                                    "
                                />
                            </view>

                            <view
                                class="process-title f-24"
                                :class="{
                                    active: item.status <= dataInfo.status,
                                }"
                            >
                                {{ item.title }}
                            </view>
                        </view>
                    </view>
                </block>
                <block v-for="(item, index) in process_list" :key="index">
                    <view
                        class="process-item"
                        v-if="!dataInfo.is_add && !dataInfo.is_upgrade"
                    >
                        <view class="flex column align-center just-center">
                            <view
                                class="process-icon flex align-center just-center"
                                :class="{
                                    'process-icon-active':
                                        item.status <= dataInfo.status,
                                }"
                            >
                                <image
                                    mode="heightFix"
                                    :src="
                                        getImageURL(
                                            `technician/order/${item.icon}_${
                                                item.status <= dataInfo.status
                                                    ? 'active'
                                                    : 'normal'
                                            }.png`
                                        )
                                    "
                                />
                            </view>

                            <view
                                class="process-title f-24"
                                :class="{
                                    active: item.status <= dataInfo.status,
                                }"
                            >
                                {{ item.title }}
                            </view>
                        </view>
                    </view>
                </block>
            </view>

            <view class="mtp wrap-info white-bg">
                <view class="title-color fb-28" v-if="dataInfo.is_upgrade">
                    原始内容
                </view>
                <!-- original_data -->
                <view
                    class="info-bg flex align-center"
                    v-if="dataInfo.is_upgrade"
                >
                    <image
                        class="file"
                        :src="dataInfo.original_data.goods.service_cover"
                    />

                    <view class="info-right">
                        <view class="title-color fb-30 limit-num-line">
                            {{ dataInfo.original_data.goods.service_name }}
                        </view>

                        <view class="service-time f-26">
                            服务师：{{ dataInfo.technician.name }}
                        </view>
                        <view class="service-time f-26">
                            服务时长：{{
                                dataInfo.original_data.goods.time_long
                            }}分钟
                        </view>

                        <view class="price price-color">
                            <text class="symbol fb-24">¥</text>
                            <text class="fb-32">{{
                                dataInfo.original_data.service_price
                            }}</text>
                        </view>
                    </view>

                    <view class="title-color f-26">
                        x{{ dataInfo.original_data.goods.num }}
                    </view>
                </view>

                <view
                    class="title-color fb-28"
                    v-if="!dataInfo.is_add && !dataInfo.is_upgrade"
                >
                    预约内容
                </view>
                <view class="title-color fb-28" v-if="dataInfo.is_add">
                    加钟内容
                </view>
                <view class="title-color fb-28" v-if="dataInfo.is_upgrade">
                    升级内容
                </view>

                <view class="info-bg flex align-center">
                    <image class="file" :src="dataInfo.goods.service_cover" />

                    <view class="info-right">
                        <view class="title-color fb-30 limit-num-line">
                            {{ dataInfo.goods.service_name }}
                        </view>

                        <view class="service-time f-26">
                            服务师：{{ dataInfo.technician.name }}
                        </view>
                        <view class="service-time f-26">
                            服务时长：{{ dataInfo.time_long }}分钟
                        </view>

                        <view class="price price-color">
                            <text class="symbol fb-24">¥</text>
                            <text class="fb-32">{{
                                dataInfo.service_price
                            }}</text>
                        </view>
                    </view>

                    <view class="title-color f-26">
                        x{{ dataInfo.goods.num }}
                    </view>
                </view>
            </view>

            <view class="wrap-address-bg white-bg mtp">
                <view class="title-color fb-28"> 客户信息 </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 下单人: </view>
                    <view class="value f-28">
                        <text
                            class="tags mr-20"
                            @click="onTag()"
                            v-if="!dataInfo.is_add && !dataInfo.is_upgrade"
                            >查看标签
                        </text>
                        {{ dataInfo.address.name }}
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 联系方式: </view>
                    <view
                        v-if="!dataInfo.is_add && !dataInfo.is_upgrade"
                        class="value f-28 flex align-center just-end"
                        @click="onCall()"
                    >
                        <image
                            class="icon"
                            src="/static/static/technician/joinUs/phone.png"
                            mode="scaleToFill"
                        />
                        <text class="tags">拨打电话</text>
                    </view>
                    <view v-else>{{ dataInfo.address.mobile }}</view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left flex align-center just-between f-28">
                        服务地址:
                    </view>
                    <view class="location">
                        <view
                            v-if="!dataInfo.is_add && !dataInfo.is_upgrade"
                            class="tags f-28 flex align-center"
                            @click="onOpenLocation(1)"
                        >
                            <image
                                class="icon1"
                                src="/static/static/technician/joinUs/map.png"
                                mode="scaleToFill"
                            />
                            <text>立即导航</text>
                        </view>
                    </view>
                </view>

                <view class="value f-28 address">
                    {{ dataInfo.address.address }}
                    {{ dataInfo.address.street_name }}
                    {{ dataInfo.address.community_name }}
                    {{ dataInfo.address.area }}
                </view>
            </view>

            <view class="mtp wrap-technician-info white-bg">
                <view class="title-color fb-28"> 订单信息 </view>

                <view
                    class="content-item flex align-center just-between"
                    v-if="dataInfo.is_add && dataInfo.is_upgrade"
                >
                    <view class="left f-28"> 服务师: </view>
                </view>

                <view
                    class="technician-info flex align-center just-between"
                    v-if="dataInfo.is_add && dataInfo.is_upgrade"
                >
                    <image
                        class="avatar"
                        :src="dataInfo.technician.work_image"
                    />

                    <view class="nickname-distance">
                        <view class="title-color f-28">
                            {{ dataInfo.technician.name }}
                        </view>

                        <view class="distance f-24" v-if="false">
                            当前距您{{ dataInfo.left_distance }}km
                        </view>
                    </view>

                    <view class="btn-bg flex align-center" v-if="false">
                        <view
                            class="f-28"
                            @click="onOpenLocation"
                            v-if="dataInfo.status === '4'"
                        >
                            实时位置
                        </view>
                        <view class="f-28" @click="onCallPhone"> 联系ta </view>
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 下单时间: </view>

                    <view class="value f-28">
                        {{ dataInfo.createtime_text }}
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 服务时间: </view>

                    <view class="value f-28">
                        {{ dataInfo.strattime_text }}
                    </view>
                </view>

                <view
                    class="content-item flex align-center just-between"
                    v-if="!dataInfo.is_add && !dataInfo.is_upgrade"
                >
                    <view class="left f-28"> 服务时长: </view>

                    <view class="value f-28">
                        {{ dataInfo.time_long }}分钟
                    </view>
                </view>

                <view
                    class="content-item flex align-center just-between"
                    v-if="!dataInfo.is_add && !dataInfo.is_upgrade"
                >
                    <view class="left f-28"> 出行费用: </view>

                    <view class="value f-28 price-color">
                        {{ $filters.getTravelTypeText(dataInfo.car_type) }}
                        ¥{{ dataInfo.car_price }}
                    </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 项目费用: </view>

                    <view class="value f-28 price-color">
                        ¥{{ dataInfo.service_price }}
                    </view>
                </view>

                <view
                    class="content-item flex align-center just-between"
                    v-if="false"
                >
                    <view class="left f-28"> 备注: </view>

                    <view class="value f-28"> {{ dataInfo.remark }} </view>
                </view>

                <view class="content-item flex align-center just-between">
                    <view class="left f-28"> 支付方式: </view>

                    <view class="value f-28">
                        {{ dataInfo.pay_type_text }}
                    </view>
                </view>

                <view class="total-price flex align-center just-end f-28">
                    <text class="title-color">总计：</text>
                    <text class="price-color">
                        ¥{{ dataInfo.total_price }}
                    </text>
                </view>
            </view>

            <view class="mtp">
                <orderProgress :dataInfo="dataInfo" />
            </view>
        </view>

        <view
            class="mask"
            v-if="showTags || showModal"
            @click="onCancel"
        ></view>

        <view class="tagsbox" v-if="showTags">
            <view class="tagsbox-title fb-36"> 客户标签 </view>
            <view class="tagsbox-normal">
                <view class="tagsbox-subtitle fb-28">普通标签</view>
                <view class="tagsbox-list flex align-center just-start f-24">
                    <view
                        class="item"
                        v-for="item in dataInfo.normal_label"
                        :key="item.id"
                    >
                        {{ item.label.name }}
                    </view>
                    <view
                        class="none"
                        v-if="dataInfo.normal_label.length === 0"
                    >
                        <image
                            src="/static/static/common/noData.png"
                            mode="widthFix"
                        />
                        <text>该用户暂无普通标签</text>
                    </view>
                </view>
            </view>
            <view class="tagsbox-normal">
                <view class="tagsbox-subtitle fb-28">负面标签</view>
                <view class="tagsbox-list flex align-center just-start f-24">
                    <view
                        class="item"
                        v-for="item in dataInfo.downside_label"
                        :key="item.id"
                    >
                        {{ item.label.name }}
                    </view>
                    <view
                        class="none"
                        v-if="dataInfo.downside_label.length === 0"
                    >
                        <image
                            src="/static/static/common/noData.png"
                            mode="widthFix"
                        />
                        <text>该用户暂无负面标签</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="model" v-if="showModal">
            <view class="model-title"> {{ modelTitle }} </view>

            <view class="model-content flex" v-if="showStatus == 4">
                <text class="model-tit">拍照打卡：</text>
                <view class="model-upimage">
                    <view class="model-image" v-if="startimg">
                        <image :src="$imageURL+startimg" />
                        <view
                            class="model-upAgin flex column align-center just-center"
                            @click="uploadImage"
                        >
                            <image
                                src="/static/static/technician/joinUs/agin.png"
                                mode="scaleToFill"
                            />
                            <view class="again f-24">重新上传</view>
                        </view>
                    </view>
                    <image
                        @click="uploadImage"
                        class="model-add"
                        v-else
                        src="/static/static/technician/joinUs/cuploadimg.png"
                    />
                </view>
            </view>

            <view class="model-content flex" v-if="showStatus == 6">
                <text class="model-tit">拍照打卡：</text>
                <view class="model-upimage">
                    <view class="model-image" v-if="endimg">
                        <image :src="$imageURL+endimg" />
                        <view
                            class="model-upAgin flex column align-center just-center"
                            @click="uploadImage"
                        >
                            <image
                                src="/static/static/technician/joinUs/agin.png"
                                mode="scaleToFill"
                            />
                            <view class="again f-24">重新上传</view>
                        </view>
                    </view>
                    <image
                        @click="uploadImage"
                        class="model-add"
                        v-else
                        src="/static/static/technician/joinUs/cuploadimg.png"
                    />
                </view>
            </view>

            <view
                class="model-content flex align-center"
                v-if="showStatus != 2"
            >
                <text class="model-tit">当前地点：</text>
                <text
                    class="model-text"
                    :class="{ col: address == '' }"
                    @click="getLocation"
                >
                    {{ address || "点击获取定位" }}
                </text>
            </view>

            <view class="model-content flex column" v-if="showStatus == 2">
                <textarea
                    class="model-textarea"
                    v-model="refuse_why"
                    placeholder="请输入拒绝原因"
                    maxlength="100"
                ></textarea>
                <text class="model-length">{{ refuse_why.length }}/100</text>
            </view>

            <view class="model-btns flex align-center">
                <view class="model-btnN" @click="onCancel">取消</view>
                <view class="model-btnY" @click="onSure">确定</view>
            </view>
        </view>

        <view
            class="footer safe-area flex align-center just-end"
            v-if="dataInfo && dataInfo.status !== 10"
        >
            <btnFuncs
                :info="dataInfo"
                :type="2"
                @onCall="onCall"
                @onComment="onComment"
                @onConfirm="onConfirm"
                @onStart="onStart"
                @onRefuse="onRefuse"
                @onChoose="onChoose"
                @onBegin="onBegin"
                @onExit="onExit"
                @onChooseSuccess="onChooseSuccess"
            ></btnFuncs>
        </view>
    </div>
</template>

<script>
import { orderDetail } from "@/API/API/order.js";
import orderBtn from "@/subPages/components/orderBtnBg/orderBtnBg.vue";
import orderProgress from "@/subPages/components/orderProgress/orderProgress.vue";
import btnFuncs from "./components/btnFuncs.vue";
import { changeOrderStatus, getDetailAddress } from "@/API/API/recruit.js";
export default {
    components: {
        orderBtn,
        orderProgress,
        btnFuncs,
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight, // 导航栏高度
            orderID: "", // 订单ID

            downTimer: null, //倒计时
            minute: 0, // 订单超时时间的分钟数
            second: 0, // 订单超时时间的秒数
            dataInfo: null, // 订单详情数据

            process_list: [
                {
                    title: "技师接单",
                    status: "3",
                    icon: "jsjd",
                },
                {
                    title: "技师出发",
                    status: "4",
                    icon: "jscf",
                },
                {
                    title: "技师到达",
                    status: "5",
                    icon: "jsdd",
                },
                {
                    title: "开始服务",
                    status: "6",
                    icon: "ksfw",
                },
                {
                    title: "服务完成",
                    status: "7",
                    icon: "fwwc",
                },
            ],
            addprocess_list: [
                {
                    title: "技师接单",
                    status: "3",
                    icon: "jsjd",
                },

                {
                    title: "开始服务",
                    status: "6",
                    icon: "ksfw",
                },
                {
                    title: "服务完成",
                    status: "7",
                    icon: "fwwc",
                },
            ],

            showModal: false, // 是否显示弹窗
            showTags: false, // 是否显示标签

            refuse_why: "", // 拒绝原因

            address: "", // 地址

            startimg: "", // 开始图片

            endimg: "", // 结束图片

            showStatus: 0, // 订单状态

            lat: "", // 纬度

            lng: "", // 经度

            trip_start_address: "", // 起点地址

            order_id: "", // 订单id
        };
    },
    onLoad(options) {
        this.orderID = options.order_id;
        this.getData();
    },

    onPullDownRefresh() {
        this.onRefresh();
    },
    methods: {
        onRefresh() {
            this.getData();
        },
        // 已离开
        onExit(info) {
            this.order_id = info.id;
            this.showStatus = info.status;
            this.modelTitle = "确认离开";
            this.showModal = true;
        },
        /**
         * 实时位置
         */
        onOpenLocation(i) {
            if (i) {
                uni.openLocation({
                    latitude: parseFloat(this.dataInfo.address.lat),
                    longitude: parseFloat(this.dataInfo.address.lng),
                    address: this.dataInfo.address.address,
                });
            } else {
                uni.openLocation({
                    latitude: parseFloat(this.dataInfo.technician.lat),
                    longitude: parseFloat(this.dataInfo.technician.lng),
                    address: this.dataInfo.technician.address,
                });
            }
        },
        /**
         * 联系技师
         */
        onCallPhone() {
            uni.makePhoneCall({
                phoneNumber: this.dataInfo.address.mobile.toString(),
            });
        },

        /**
         * 倒计时计算
         */
        calculationDownTime() {
            const now = new Date().getTime();
            const end = this.dataInfo.autocancel * 1000;
            const surplus = Math.floor((end - now) / 1000);

            if (surplus <= 0) {
                clearInterval(this.downTimer);
                // this.getData();
                return;
            }
            const second = Math.floor(surplus % 60);
            const minute = Math.floor(surplus / 60);

            this.minute = minute.toString().padStart(2, "0");
            this.second = second.toString().padStart(2, "0");
        },
        /**
         * 网络请求
         */
        getData() {
            orderDetail(this.orderID)
                .then((res) => {
                    this.dataInfo = res.data;
                    clearInterval(this.downTimer);
                    if (this.dataInfo.status === "1") {
                        this.calculationDownTime();
                        this.downTimer = setInterval(() => {
                            this.calculationDownTime();
                        }, 1000);
                    }
                })
                .catch((err) => {
                    uni.showToast({
                        icon: "none",
                        title: err.msg,
                    });
                });
        },
        // 查看标签
        onTag() {
            this.showTags = true;
        },
        // 拨打电话
        onCall() {
            uni.makePhoneCall({
                phoneNumber: this.dataInfo.address.mobile.toString(),
            });
        },
        onComment(info) {
            // 评论客户
            uni.navigateTo({
                url: `/subPages/technician/technician/appraiseUser?order_id=${this.orderID}`,
            });
        },
        onConfirm(info) {
            // 确认接单
            changeOrderStatus({
                order_id: info.id,
                type: 1,
            })
                .then((res) => {
                    this.getData();
                })
                .catch((err) => {
                    uni.showToast({
                        icon: "none",
                        title: err.msg,
                    });
                });
        },
        onStart(info) {
            // 已出发
            this.showStatus = info.status;
            this.modelTitle = "确认出发";
            this.showModal = true;
        },
        onRefuse(info) {
            // 拒绝接单
            this.showStatus = info.status;
            this.modelTitle = "填写拒绝原因";
            this.showModal = true;
        },
        onChoose(info) {
            // 拍照确认到达
            this.showStatus = info.status;
            this.modelTitle = "确认到达";
            this.showModal = true;
        },
        uploadImage() {
            // 上传图片
            uni.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"],
                sourceType: ["camera"], // camera拍照，album选相册
                success: (res) => {
                    uni.showLoading({ title: "上传中" });
                    uni.uploadFile({
                        url: this.$HTTP + "common/upload",
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        success: (uploadFileRes) => {
                            uni.hideLoading();
                            if (this.showStatus == 4) {
                                this.startimg = JSON.parse(
                                    uploadFileRes.data
                                ).data.url;
                            } else {
                                this.endimg = JSON.parse(
                                    uploadFileRes.data
                                ).data.url;
                            }
                        },
                    });
                },
            });
        },
        onBegin(info) {
            // 开始服务
            changeOrderStatus({
                order_id: info.id,
                type: 4,
            })
                .then((res) => {
                    this.getData();
                })
                .catch((err) => {
                    uni.showToast({
                        icon: "none",
                        title: err.msg,
                    });
                });
        },
        onChooseSuccess(info) {
            // 拍照完成任务
            this.showStatus = info.status;
            this.modelTitle = "确认完成";
            this.showModal = true;
        },
        getLocation() {
            // 获取当前位置
            uni.getLocation({
                type: "gcj02",
                success: (res) => {
                    this.lat = res.latitude;
                    this.lng = res.longitude;
                    getDetailAddress({
                        lat: res.latitude,
                        lng: res.longitude,
                    })
                        .then((ress) => {
                            this.address =
                                ress.data.province +
                                ress.data.city +
                                ress.data.district +
                                ress.data.streetNumber.street +
                                ress.data.township;
                        })
                        .catch((err) => {
                            uni.showToast({
                                icon: "none",
                                title: err.msg,
                            });
                        });
                },
            });
        },
        onCancel() {
            this.showModal = false;
            this.showTags = false;
            this.address = "";
            this.startimg = "";
            this.endimg = "";
            this.refuse_why = "";
        },
        onSure() {
            if (this.showStatus == 3) {
                if (this.address == "") {
                    uni.showToast({
                        title: "请选择地址",
                        icon: "none",
                    });
                    return;
                }
                changeOrderStatus({
                    order_id: this.orderID,
                    trip_start_lat: this.lat,
                    trip_start_lng: this.lng,
                    trip_start_address: this.address,
                    type: 2,
                })
                    .then((res) => {
                        this.getData();
                    })
                    .catch((err) => {
                        uni.showToast({
                            icon: "none",
                            title: err.msg,
                        });
                    });
            } else if (this.showStatus == 4 || this.showStatus == 6) {
                if (this.startimg == "" && this.showStatus == 4) {
                    uni.showToast({
                        title: "请拍照确认到达",
                        icon: "none",
                    });
                    return;
                } else {
                    changeOrderStatus({
                        order_id: this.orderID,
                        arrive_img: this.startimg,
                        trip_end_lat: this.lat,
                        trip_end_lng: this.lng,
                        trip_end_address: this.address,
                        type: 3,
                    })
                        .then((res) => {
                            this.getData();
                        })
                        .catch((err) => {
                            uni.showToast({
                                icon: "none",
                                title: err.msg,
                            });
                        });
                }
                if (this.endimg == "" && this.showStatus == 6) {
                    uni.showToast({
                        title: "请拍照确认完成",
                        icon: "none",
                    });
                    return;
                } else {
                    changeOrderStatus({
                        order_id: this.orderID,
                        end_service_img: this.endimg,
                        service_complete_lat: this.lat,
                        service_complete_lng: this.lng,
                        service_complete_address: this.address,
                        type: 5,
                    })
                        .then((res) => {
                            this.getData();
                        })
                        .catch((err) => {
                            uni.showToast({
                                icon: "none",
                                title: err.msg,
                            });
                        });
                }
                if (this.address == "") {
                    uni.showToast({
                        title: "请获取位置",
                        icon: "none",
                    });
                    return;
                }
            } else if (this.showStatus == 2) {
                if (this.refuse_why == "") {
                    uni.showToast({
                        title: "请填写拒绝原因",
                        icon: "none",
                    });
                    return;
                }
                changeOrderStatus({
                    order_id: this.orderID,
                    refuse_why: this.refuse_why,
                    type: -1,
                })
                    .then((res) => {
                        this.getData();
                    })
                    .catch((err) => {
                        uni.showToast({
                            icon: "none",
                            title: err.msg,
                        });
                    });
            } else if (this.showStatus == 7) {
                if (this.address == "") {
                    uni.showToast({
                        title: "请获取位置",
                        icon: "none",
                    });
                    return;
                }
                changeOrderStatus({
                    order_id: this.order_id,
                    leave_service_img: this.endimg,
                    service_leave_address: this.address,
                    service_leave_lat: this.lat,
                    service_leave_lng: this.lng,
                    type: 6,
                })
                    .then((res) => {
                        this.getData();
                    })
                    .catch((err) => {
                        uni.showToast({
                            icon: "none",
                            title: err.msg,
                        });
                    });
            }

            this.address = "";
            this.startimg = "";
            this.endimg = "";
            this.refuse_why = "";
            this.showModal = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    --bottom-height: 140rpx;
    --limit-num: 1;
    position: relative;
    z-index: 1;
    padding: 20rpx;
    box-sizing: border-box;

    .white-bg {
        width: 100%;
        overflow: hidden;
        background-color: white;
        border-radius: 20rpx;
    }

    .order-status {
        width: 100%;
        height: 88rpx;
        overflow: hidden;

        .status {
            color: $bg-text-color;
        }

        .down-time {
            color: $bg-text-color;
            margin-top: 15rpx;
        }
    }

    .order-process {
        height: 186rpx;

        .process-item {
            display: inline-block;
            flex: 1;
            overflow: hidden;
            height: 186rpx;

            > view {
                width: 100%;
                height: 100%;

                .process-icon {
                    width: 90rpx;
                    height: 90rpx;
                    border-radius: 50%;
                    border: 2rpx solid #666666;

                    > image {
                        height: 48rpx;
                    }
                }
                .process-icon-active {
                    border-color: $theme-color !important;
                }

                .process-title {
                    margin-top: 15rpx;
                    color: $title-color;
                }
            }
        }
    }

    .wrap-info {
        padding: 30rpx 20rpx;
        box-sizing: border-box;

        .info-bg {
            margin: 30rpx 0;
            width: 100%;
            overflow: hidden;

            .file {
                width: 176rpx;
                height: 176rpx;
                border-radius: 20rpx;
                overflow: hidden;
            }

            .info-right {
                margin-left: 20rpx;
                flex: 1;
                overflow: hidden;
                margin-right: 10rpx;

                .service-time {
                    margin-top: 24rpx;
                    color: #a3a3a3;
                }

                .price {
                    margin-top: 24rpx;

                    .symbol {
                        margin-right: 5rpx;
                    }
                }
            }
        }
    }

    .wrap-address-bg {
        padding: 30rpx 20rpx;
        box-sizing: border-box;

        .address {
            text-align: left !important;
            margin-top: 30rpx;
            line-height: 40rpx;
        }
    }

    .wrap-technician-info {
        padding: 30rpx 20rpx;
        box-sizing: border-box;

        .technician-info {
            margin-top: 30rpx;
            width: 100%;
            overflow: hidden;

            .avatar {
                width: 82rpx;
                height: 82rpx;
            }

            .nickname-distance {
                margin-left: 30rpx;
                flex: 1;
                overflow: hidden;

                .distance {
                    margin-top: 12rpx;
                    color: #b0b0b0;
                }
            }

            .btn-bg {
                margin-left: 10rpx;
                overflow: hidden;

                > view {
                    height: 48rpx;
                    line-height: 48rpx;
                    text-align: center;
                    color: $theme-color;
                    border-radius: 6rpx;
                    border: 2rpx solid $theme-color;
                    margin-right: 20rpx;
                    padding: 0 15rpx;

                    &:last-child {
                        margin-right: 0rpx;
                    }
                }
            }
        }

        .total-price {
            margin-top: 30rpx;
            padding-top: 30rpx;
            border-top: 2rpx solid #ececec;
        }
    }
}

.tagsbox {
    color: $theme-color;
    width: 100%;
    height: 44vh;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999;
    background-color: white;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    &-title {
        color: $title-color;
        text-align: center;
        margin-bottom: 30rpx;
    }
    &-subtitle {
        color: $title-color;
        margin: 20rpx 0;
    }
    &-list {
        flex-wrap: wrap;
        .item {
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            padding: 0 20rpx;
            height: 46rpx;
            line-height: 46rpx;
            background: #d6d9f2;
            border-radius: 20rpx;
        }
    }
}

.none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    image {
        width: 300rpx;
    }
    color: #000;
}

.title-color {
    color: $title-color;
}

.price-color {
    color: $price-color !important;
}

.content-item {
    width: 100%;
    overflow: hidden;
    margin-top: 30rpx;
}
.left {
    color: #999999;
    margin-right: 20rpx;
}

.value {
    flex: 1;
    text-align: right;
    color: $title-color;
}

.mtp {
    margin-top: 20rpx;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(100% - 40rpx);
    height: 128rpx;
    padding: 0 20rpx;
    background-color: white;
    z-index: 10;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
}
.mr-20 {
    margin-right: 20rpx;
}
.mr-10 {
    margin-right: 10rpx;
}
.tags {
    color: $theme-color;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}
.model {
    width: 90%;
    background: white;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    text-align: center;
    padding: 0 50rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    &-tit {
        width: 180rpx;
    }
    &-text {
        line-height: 1.3;
        flex: 1;
    }
    &-title {
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
        padding: 45rpx 0 0 0;
    }
    &-content {
        font-size: 30rpx;
        color: #333333;
        padding: 30rpx 20rpx;
        line-height: 1.4;
        text-align: left;
        position: relative;
    }
    &-upimage,
    &-image {
        width: 162rpx;
        height: 162rpx;
        border-radius: 20rpx;
        position: relative;
        image {
            width: 100%;
            height: 100%;
        }
    }
    &-upAgin {
        width: 162rpx;
        height: 162rpx;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 20rpx;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;

        > image {
            width: 63.66rpx;
            height: 58.36rpx;
        }
        .again {
            line-height: 1.4rem;
        }
    }
    &-textarea {
        width: 100%;
        margin: 20rpx 0;
        padding: 20rpx;
        border-radius: 20rpx;
        box-sizing: border-box;
        background: #f5f5f5;
    }
    &-length {
        position: absolute;
        right: 40rpx;
        bottom: 80rpx;
        font-size: 24rpx;
        color: #999999;
    }
    &-btns {
        justify-content: space-around;
        padding: 10rpx 0 40rpx 0;
    }
    &-btnN {
        color: #666666;
        background: #ececec;
    }
    &-btnY {
        color: white;
        background: $grad-theme-color;
    }
    &-btnN,
    &-btnY {
        width: 200rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 38rpx;
    }
}
.col {
    color: $theme-color;
}
.icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
}
.icon1 {
    width: 32rpx;
    height: 36rpx;
    margin-right: 10rpx;
}
</style>
